<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JeversonJeeHTMLRoad</title>
    <!-- 外链式写法 -->
    <link rel="stylesheet" href="1.css">
    <style type="text/css">
        /*JeversonJee the demo of 01 */
        /*
        .wrap{
            width: 800px;
            margin: 0 auto;
        }
        .wrap h1{
            font: 30px microsoft yehei;
            text-align: center;
        }
        .wrap .subtitle{
            text-align: center;
        }
        .date,.news{
            font-size: 14px;
        }
        span.date{
            color: rgb(190, 190, 190);
        }
        span.news{
            color: red;
        }
        .subtitle  input[type=text]{
            color: red;
        }
        .subtitle input[type=button]{
            color: green;
            font-weight: 700;
        }
        p{
            text-indent: 2em;
            line-height: 24px;
        }
        .wrap p span{
            color: blue;
        }
        */
        /* 03标签分类(显示方式) */
        /* .box{
            width: 300px;
            height: 100px;
            background-color: #888;
        }
        .box p{
            height: 50px;
            background: red;
        } */
        /* 04行内块元素 */
        /*span, strong{
            width: 600px;
            height: 600px;
            background-color: red;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: #888;
        }
        .box span{
            background-color: red;
        }*/
       /* 04行内块元素 */    
      /*img{
      	width: 300px;
      	vertical-align: baseline;
      }
      input{
      	width: 300px;
      	height: 200px;
      	background-color: blue;
      }*/
     /*05 块元素、行内元素转换*/
    /*块元素转换为行内元素*/
    /*div,p{
    		display: inline;
    }
    /*行内砖块*/
   /*span{
   		display: block;
   }*/
  		/*06转行内块元素*/
  		/*div,a,span,strong{
  			display: inline-block;
  			width: 200px;
  			height: 200px;
  			background-color: yellow;
  			text-align: center;
  		}*/
  		/*07层叠性*/
  		/*.box2{
  			font-size: 200px;
  			color: blue;
  		}
  		.box{
  			font-size: 60px;
  			color: red;
  		}*/
  		/*08继承性*/
  		/*.father{
  			color: red;
  			font: italic 700 40px "microsoft yahei";	
  		}*/
  		/*.box{
  			font-size: 30px;
  			color: yellow;
  		}*/
  		/*09优先级*/
  		/*#con{
  			color: pink;
  			font-size: 100px;
  		}
  		.box{
  			color: green;
  			font-size: 60px;
  		}
  		div{
  			color: red !important;
  			font-size: 60px !important;
  		}*/
  		/*09.1继承的权重为0*/
  		/*.father{
  			color: red;
  			font-size: 60px;
  		}
  		p{
  			font-size: 20px;
  			color: blue;
  		}
  		#box{
  			color: green;
  			font-size: 500px;
  		}*/
  		/*09.2继承的叠加性能*/
  		/*p.son{
  			font-size: 120px;
  			color: yellow;
  		}
  		p{
  			font-size: 30px;
  			color: red;
  		}
  		.father .son{
  			font-size: 500px;
  			color: pink;
  		}
  		.son{
  			font-size: 60px;
  			color: blue;
  		}
  		.father #baby{
  			font-size: 12px;
  			color: orange;
  		}*/
    		/*10 链接的伪类*/
    		/*a:link{
    			color: red;
    		}*/
        /*链接默认状态*/
       	/*a{
       		color: red;
       		text-decoration: none;
       	}*/
       	/*链接访问之后的状态*/
       	/*a:visited{
       		color: greed;
       	}*/
       	/*鼠标放在裂解上显示的状态*/
       	/*a:hover{
       		color: blue;
       		text-decoration: line-through;
       	}*/
       	/*链接激活的状态*/
       	/*a:active{
       		color: pink;
       	}*/
       	/*12导航案例*/
       	/*.nav{
       		background-color: #aaa;
       		height: 64px;
       		text-align: center;
       	}
       	a{
       		display: inline-block;
       		width: 100px;
       		height: 64px;
       		text-decoration: none;
       		color: #000;
       		font-weight: 700;
       	}
       	a.public{
       		font-weight: 700;
       		color: #F14400;
       	}
       	a:hover{
       		background-color: #eee;
       		text-decoration: underline;
       		color: #F14400;
       	}*/
       	/*13背景属性*/
       	/*body{
       		background-color: red;
       	}*/
       	.box{
       		width: 400px;
       		height: 500px;
       		background-color: #999;
       		background-image: url("1.png");
       		background-repeat: no-repeat;
       		background-position: left;
       		background-attachment: fixed;
       		/*背景属性连写*/
       		background: red url("1.png") no-repeat 30px 40px scroll;	
       		
       	}
       	/*练习两则*/
       	input{
       		width: 280px;
       		height: 30px;
       		background: url("serch.jpg") no-repeat right;
       	}
       	li{
       		list-style: none;
       		background: url("li.gif") no-repeat left center;
       		text-indent: 1em;
       	}
    </style>

</head>
<body>
    <!-- 01综合练习 -->
    <!--
    <div class="wrap">
        <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
        <div class="subtitle">
            <span class="date">2014年07月16日20:11</span>
            <span class="news">新浪体育 评论中大奖（11人参与）</span>
            <a href="#">收藏本文</a>&nbsp;
            <input type="text" value="请输入查询条件">
            <input type="button" value="搜索">
        </div>
        <hr>
        <p>新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
        <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
        <p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。 </p>
        <p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong> </p>
    </div>
-->
<!-- 行内样式表 -->
    <!-- <h1 style="font-size: 30px; color: red;">JeversonJee is in webroad</h1> -->
    <!-- 块元素显示方式 -->
    <!-- <div class="box">
        <p></p>
    </div> -->
    <!-- 行内元素 -->
    <!--<span>Jeverson is ur father.we are alway playing the paino</span><a href="#">hello world</a><strong>jeversonjee greatest webenginer</strong>
    <div class="box"><span>God,JeversonJee</span></div>-->
    <!--行内块元素u-->
    <!--<img src="top.jpg" alt="jeversondemo" /> <input type="text" />-->
    <!--块元素行内元素转换-->
    <!--<span>Jeverson is ur fathter</span>
    <span>Jeverson is a web developer</span>-->
    <!--<div>Jeverson is ur fahter <a href="#">Click here</a><span>looking baba</span><strong>fucking idoit</strong></div>-->
    <!--样式表的层叠性-->
    <!--<div class="box box2">JeversonJee I love u</div>-->
    <!--继承性-->
    <!--<div class="father">
    		<p>我是你爸爸</p>
    </div>-->
    <!--<div class="box">
    		<h1>JeversonJee</h1>
    		<h2>gender:male</h2>
    		<a href="#">clickherefordady</a>
    </div>-->
    <!--优先级 默认<标签<类选择器<id选择器<!important-->
    <!--<div class="box" id="con" style="font-size: 12px; color: yellow;">JeveronJee 优先级设置</div>-->
    <!--09.1继承的权重为0-->
    <!--<div class="father" id="box">
    		<p>JeversonJee is ur father</p>
    </div>-->
    <!--<div class="father">
    		<p class="son" id="baby">Jeversonis ur father</p>
    </div>-->
    <!--<a href="#">10链接伪类的使用</a>-->
    <!--12导航栏案例-->
    <!--<div class="nav">
    		<a href="#" class="public">天猫</a>
    		<a href="#" class="public">聚划算</a>
    		<a href="#" class="public">超市</a>
    		<a href="#" class="public">头条</a>
    		<a href="#">阿里旅行</a>
    		<a href="#">电器城</a>
    		<a href="#">海抢购</a>
    		<a href="#">苏宁易购</a>
    		<a href="#">智能生活</a>
    </div>-->
    <div class="box">
    	
    </div>
    <input type="text" value="请输入关键字" />
    <ul>
    	<li><a href="#">葛朗台商业简讯</a></li>
    	<li><a href="#">趋势</a></li>
    	<li><a href="#">经济</a></li>
    	<li><a href="#">金融</a></li>
    	<li><a href="#">管理</a></li>
    </ul>
</body>
</html>